<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>橄榄型尝试</title>
</head>
<body>
	<div id="d1" onclick="ccc()"></div>
	<div id="d2" onclick="ccc()"></div>
	<div id="d3" onclick="isDelay()"></div>
</body>
</html>

<style type="text/css">
div{
	margin:50px 0;
	float:left;
	background-color:#f69d3c;
	/*background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);*/
	/*background: radial-gradient(circle, #3f87a6, #ebf8e1, #f69d3c);*/
	/*background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);*/
}
#d1{
	width:16px;
	height:150px;
	border-top-left-radius:50%;
	border-bottom-left-radius:50%;
	background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
#d2{
	width:150px;
	height:150px;
	background: radial-gradient(circle at 100%, #3f87a6, #ebf8e1, #f69d3c)
}
#d3{
	width:16px;
	height:150px;
	border-top-right-radius:50%;
	border-bottom-right-radius:50%;
}
</style>

<script>
	//防抖动
	function preventShake(){
		console.log("pre")
		let timer=null;
		return function(){
			let context=this,args=arguments;
			console.log(timer);
			if(timer) clearTimeout(timer);
			timer=setTimeout(function(){
				console.log(timer,"timer")
			},2000)
		}
	}
	let ccc=preventShake();
	//延时
	function clickDelay(){
		let timer=null;
		return function(s){
			return !timer&&(timer=setTimeout(()=>{
				console.log(timer);
				timer=null
			},s||2000))
		}
	}
  let ddd=clickDelay();
  function isDelay(){
  	console.log(ddd());return;
  	ddd&&console.log("T_T")
  }
</script>